<script setup>

import WkFieldView from "components/NewCom/WkForm/WkFieldView.vue";
import SceneSearch from "@/views/scrm/component/search/sceneSearch.vue";
import FieldSearch from "@/views/scrm/component/search/fieldSearch.vue";
import action from "../action/index.vue"
import SzPaginationTwo from "@/views/scrm/component/page/SzPaginationTwo.vue";
import {getFormFieldShowName} from "components/NewCom/WkForm/utils.js";

const properties = defineProps({
  fieldList: {
    type: Array,
    default: ''
  },
  fieldData: {
    type: Array,
    default: ''
  },
  formatter: {  //(row: any, column: any, cellValue: any, index: number) => VNode | string
    type: Function
  },
  cellFormatter: {
    type: Array,
    default: [
      'dealStatus',
      'status',
      'checkStatus',
      'receivedStatus',
      'businessCheck',
    ]
  },
  cellClassName: { //(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => string
    type: Function
  },
  headerCellClassName: { //(data: { row: any, rowIndex: number }) => string
    type: Function
  },
  rowClassName: { //(data: { row: any, rowIndex: number }) => string
    type: Function
  },
  starShow: {
    type: Boolean
  },
  // 切换关注状态 (index,status)
  toggleStar: {
    type: Function
  },
  sceneList: {
    type: Array
  },
  permission: {}
})


function rowKey(row) {
  //(row: any) => string
  return row.id
}

const emits = defineEmits(['onLoad',
  // 下面是table
  'rowClick', 'sortChange', 'headerDragend', 'selectionChange', 'select',
  // 下面是搜索按钮
  'refreshChange', 'searchChange', 'searchReset',

  //   下面是新增改查
  'rowSave', 'rowUpdate', 'rowView', 'rowDel', "onImport", 'onExport'])

function onRowClick(row, column, event) {
  // (row: any, column: any, event: Event) => void
  emits('rowClick', row, column, event)

}

function onSortChange(column, prop, order) {
  // (data: {column: any, prop: string, order: any }) => void
  emits('sortChange', row, prop, order)

}

// 当拖动表头改变了列的宽度的时候会触发该事件
function onHeaderDragend(newWidth, oldWidth, column, event) {
  // (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => void
  emits('headerDragend', newWidth, oldWidth, column, event)


}

function onSelectionChange(newSelection) {
  // (newSelection: any[]) => void
  emits('selectionChange', newSelection)

}

function onSelect(selection) {
  // (newSelection: any[]) => void
  emits('select', selection)

}

/**
 * 格式化字段
 * @param {*} row
 * @param {*} column
 * @param {*} cellValue
 */
function fieldFormatter(row, column, cellValue, field) {
  // 如果需要格式化
  if (column.property === 'isTransform') {
    return ['否', '是'][row[column.property]] || '--'
  }

  if (field) {
    return getFormFieldShowName(field.formType, row[column.property], '--', field)
  }
  return row[column.property] === '' || row[column.property] === null ? '--' : row[column.property]
}

function sceneSelect() {
  emits('onLoad')
}


function searchChange() {
  emits('searchChange')
}


</script>

<template>
  <!--  场景搜索区域-->
<!--  移除了fieldLis的prop，因为在table中的fieldList经过了key的转换。和原始的不同-->
  <scene-search :sceneList="sceneList" @sceneChange="sceneSelect"></scene-search>
  <div></div>
  <!--  字段搜索区域-->
  <field-search @searchChange="searchChange"></field-search>
  <div></div>
  <!--  {{$slots}}-->
  <!--  操作区域-->
  <action :permission="permission" @rowSave="$emit('rowSave')"
          @rowUpdate="$emit('rowUpdate')"
          @rowView="$emit('rowView')">
    <template v-slot:menu-left>
      <slot name="menu-left"></slot>
    </template>

    <template v-slot:menu-right>
      <slot style="margin-right: 10px" name="menu-right"></slot>
    </template>
  </action>
  <div>&nbsp;</div>
  <el-table id="crm-table" ref="refCrmTable"
            :row-height="40"
            :data="fieldData"
            :cell-class-name="cellClassName"
            :row-class-name="rowClassName"
            :header-cell-class-name="headerCellClassName"
            :row-key="rowKey"
            class="n-table--border"
            stripe
            border
            highlight-current-row
            style="width: 100%"
            @row-click="onRowClick"
            @sort-change="onSortChange"
            @header-dragend="onHeaderDragend"
            @select="onSelect"
            @selection-change="onSelectionChange">
    <!-- 选择框 -->
    <el-table-column show-overflow-tooltip reserve-selection type="selection" align="center" width="55"/>
    <el-table-column v-for="(item, index) in fieldList" :key="index"
                     :fixed="index==0"
                     :prop="item.prop"
                     :label="item.label"
                     :formatter="formatter"
                     :width="item.width"
                     :sortable="item.prop != 'poolDay' ? 'custom' : false"
                     show-overflow-tooltip>
      <template v-slot:default="{ row, column, $index }">
        <!--        <template v-for="(filterItem, filterKey) in cellFormatter " :key="filterKey">-->
        <!--          <template v-if="item.prop == filterKey">-->
        <!--            <slot name="cellSlot" :data="{ row, column, $index }"/>-->
        <!--          </template>-->
        <!--        </template>-->
        <!--        <template  v-if="[item.prop].includes(cellFormatter)">-->
        <!--        {{ cellFormatter }}-->
        <!--        {{ item.prop }}-->
        <template v-if="cellFormatter.includes(item.prop)">
          <slot name="cellSlot" :cellData="{ row, column, $index }"/>
        </template>

        <WkFieldView v-else v-bind:props="item" v-bind:form-type="item.formType" v-bind:value="row[column.property]">
          <template v-slot:default="{ data }">
            {{ fieldFormatter(row, column, row[column.property], item) }}
          </template>
        </WkFieldView>
      </template>
    </el-table-column>

    <template v-if="$slots.operationColumn">
      <el-table-column label="操作" align="center" fixed="right" width="250">
        <template v-slot:default="{ row, column, $index }">
          <!--          {{row}}-->
          <!--          {{column}}-->
          <slot name="operationColumn" :data="{ row, column, $index }"/>
        </template>
      </el-table-column>
    </template>
    <!--    <el-table-column v-if="starShow" label="关注" align="center" fixed="right" width="60">-->
    <!--      <slot name="operationColumn">-->
    <!--    <slot v-if="$slots.label" name="label"/>-->
    <!--    <slot name="reference"/>-->


    <!--      </slot>-->
    <!--    </el-table-column>-->


    <!--自定义字段管理，目前看来没有显示出来-->
    <!--    <el-table-column :resizable="false" fixed="right" width="40">-->
    <!--      <template v-slot:header="{ column, $index }">-->
    <!--        <FieldSet v-bind:crm-type="crmOption.crmType" v-on:change="setSave"/>-->
    <!--      </template>-->
    <!--    </el-table-column>-->
    <!--    <template v-slot:empty>-->
    <!--      <WkEmpty :props="{buttonTitle: '新建',showButton: saveAuth}" @click="createClick"/>-->
    <!--    </template>-->
  </el-table>
  <div class="p-container">
    <slot name="pagination-left"></slot>
    <SzPaginationTwo></SzPaginationTwo>
    <!--    <SzPagination v-model:pageSize=paginationOption.pageSize-->
    <!--                  v-model:currentPage=paginationOption.currentPage-->
    <!--                  v-model:total="paginationOption.total">-->
    <!--    </SzPagination>-->
    <slot name="pagination-right"></slot>
  </div>

</template>

<style scoped lang="scss">
.avue-crud__header {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 40px;
  height: auto;
  overflow: hidden;
  margin-bottom: 5px;
  background-color: #fff;
}

// 分页
.p-contianer {
  position: relative;
  background-color: white;
  height: 44px;
  border-top: 1px solid $xr-border-line-color;

  .p-bar {
    float: right;
    margin: 5px 100px 0 0;
  }
}
</style>